﻿<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
 
    <script type='text/html' template lay-done='layui.data.formdone(d.params);'> 
        <input type='hidden' name='PID' value="{{ d.params.PID || '' }}"/>
    </script>   
    <div class='layui-form-item'>
        <label class='layui-form-label'>名称<span style="color:red">*</span></label>
        <div class='layui-input-block'>
            <script type='text/html' template>
                <input type='text' name='Name' value='{{ d.params.Name || '' }}' lay-verify='required' placeholder='名称' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>     
    <div class='layui-form-item'>
        <label class='layui-form-label'>级别<span style="color:red">*</span></label>
        <div class='layui-input-block'>
            <script type='text/html' template>
                <select id="Level_Sel" name='Level_Sel' lay-verify='required' lay-filter="sellevel">
                    <option value=""></option>
                    <option value='0' {{ d.params.Level_Sel == '0' ? 'selected' : '' }}>市级</option>
                    <option value='1' {{ d.params.Level_Sel == '1' ? 'selected' : '' }}>县级</option>
                    <option value='2' {{ d.params.Level_Sel == '2' ? 'selected' : '' }}>网点</option>
                </select>
            </script> 
        </div>
    </div>
    <div class='layui-form-item' id="divArea">
        <label class='layui-form-label'>所属县/区<span style="color:red">*</span></label>
        <div class='layui-input-block'>
            <script type='text/html' template lay-done='layui.data.getSelSource(d.params,"Area");'>
                <select name='Area' id='Area' lay-verify='required' lay-search lay-filter="selarea">
                    <option value=""></option>
                </select>
            </script>
        </div>
    </div>   
    <div class='layui-form-item' id="divStores" style="display:none">
        <label class='layui-form-label'>关联网点<span style="color:red">*</span></label>
        <div class='layui-input-block'>
            <script type='text/html' template lay-done='layui.data.getSelSource(d.params,"Stores");'>
                <select name='Stores' xm-select="Stores" id='Stores'>
                    <option value="">请先选择区/县，产品只对关联网点开放</option>
                </select>
            </script>
        </div>
    </div> 
       
    <div class='layui-form-item'>
        <label class='layui-form-label'>店招图</label>
        <div class='layui-input-block'>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="selectImg">选择图片</button>
                <div class="layui-upload-list" id="divImgs"></div>
                <script type='text/html' template lay-done='layui.data.setUploads(d.params);'>
                    <input type="hidden" name="Path" id="Path" value="{{ d.params.Path || '' }}">
                </script>
                <hr />
            </div>
        </div>
    </div>
    <div class='layui-form-item'>
        <label class='layui-form-label'>联系人<span style="color:red">*</span></label>
        <div class='layui-input-block'>
            <script type='text/html' template>
                <input type='text' name='UserName' value='{{ d.params.UserName || '' }}' lay-verify='required' placeholder='联系人' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>   
    <div class='layui-form-item'>
        <label class='layui-form-label'>联系电话<span style="color:red">*</span></label>
        <div class='layui-input-block'>
            <script type='text/html' template>
                <input type='text' name='Phone' value='{{ d.params.Phone || '' }}' lay-verify='required' placeholder='联系电话' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>    
    <div class='layui-form-item'>
        <label class='layui-form-label'>详细地址<span style="color:red">*</span></label>
        <div class='layui-input-block'>
            <script type='text/html' template>
                <input type='text' name='Address' value='{{ d.params.Address || '' }}' lay-verify='required' placeholder='地址' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>       
    <div class='layui-form-item'>
        <label class='layui-form-label'>状态 </label>
        <div class='layui-input-block'>
            <script type='text/html' template>
                <select name='State_Sel'>
                    <option value='0' {{ d.params.State_Sel == '0' ? 'selected' : '' }}>启用</option>
                    <option value='1' {{ d.params.State_Sel == '1' ? 'selected' : '' }}>停用</option>
                </select>
            </script> 
        </div>
    </div>

    <div class='layui-form-item'>
        <label class='layui-form-label'>备注</label>
        <div class='layui-input-block'>
            <script type='text/html' template>
                <input type='text' name='RMK' value='{{ d.params.RMK || '' }}' lay-verify='' placeholder='备注' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div> 

    <div class='layui-form-item'>
        <label class='layui-form-label'>资质信息</label>
        <div class='layui-input-block'>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="selectImg2">选择图片</button>
                <div class="layui-upload-list" id="divImgs2"></div>
                <script type='text/html' template lay-done='layui.data.setUploads2(d.params);'>
                    <input type="hidden" name="Qualifications" id="Qualifications" value="{{ d.params.Qualifications || '' }}">
                </script>
                <hr />
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="确认" class="layui-btn">
        </div>
    </div>
</div>
<style>
    .layui-upload-img {
        width: 100px;
        height: auto;
    }
</style>

<script type="text/javascript"> 
    var form, admin, $, formSelects;
    layui.use(['form', 'admin', 'upload', 'laydate', 'formSelects'], function () {
        form = layui.form;//required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证） 自定义值
        $ = layui.$;
        admin = layui.admin;
        formSelects = layui.formSelects;

        form.on("select(sellevel)", function (data) {
            SelLevel(data.value);
            $("#Area").val("");
            layui.formSelects.value('Stores', []);
            form.render("select");
        })

        form.on("select(selarea)", function (data) {
            layui.formSelects.value('Stores', []);
            form.render("select");
            LoadStore(data.value, "");
        })

    });

    layui.data.formdone = function (d) {
        if (d.PID != "" && d.PID != null) {
            SelLevel(d.Level_Sel);
        }
    }

    function SelLevel(level) {
        if (level == 0) {        //市级供应商对所有网点开放
            //$("#divArea").hide();
            $("#divStores").hide();
        }
        else if (level == 1) {   //县级供应商对所选区域网点开放
            //$("#divArea").show();
            $("#divStores").hide();
        }
        else {                   //网点供应商只对所选网点开放
            //$("#divArea").hide();
            $("#divStores").show();
        }
    }

    function LoadStore(area, Stores) {
        var formSelects = layui.formSelects;
        formSelects.config('Stores', {
            keyName: 'Name',            //自定义返回数据中name的key, 默认 name
            keyVal: 'PID',            //自定义返回数据中value的key, 默认 value
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/StoreMgr/customerQuery?area=' + area, //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                formSelects.data('Stores', 'local', {
                    arr: res.Data
                });
                var selIDs = Stores;
                if (selIDs != "" && selIDs != undefined) {
                    for (var i = 0; i < selIDs.split(',').length; i++) {
                        formSelects.value('Stores', [selIDs.split(',')[i]], true);
                    }
                }
            }
        });
    }
    
    layui.data.getSelSource = function (d, sourceName) {
        layui.use(['admin', 'form', 'formSelects'], function () {
            $ = layui.$;
            form = layui.form;
            admin = layui.admin;

            if (sourceName == "Area") {
                admin.req({
                    url: layui.setter.APIUrl + '/shop/StoreareaMgr/customerQuery', //实际使用请改成服务端真实接口
                    type: 'post',
                    done: function (res) {
                        layui.each(res.Data, function (index, eachdata) {
                            var strIsSel = '';
                            if (eachdata.Name == d.Area)
                                strIsSel = "selected='selected'";
                            $("#Area").append("<option value='" + eachdata.Name + "' " + strIsSel + ">" + eachdata.Name + "</option>");
                        });
                        form.render('select');
                    }
                });
            }
            if (sourceName == "Stores") {
                if (d.Level_Sel == 2) {
                    LoadStore(d.Area, d.Stores);
                }
            }
        });
    }
 

    layui.data.setUploads = function (d) {
        layui.use(['jquery', 'upload', 'admin'], function () {
            window.jQuery = window.$ = layui.jquery;
            upload = layui.upload,
            admin = layui.admin;
            //多图上传
            var uploadInst = upload.render({
                elem: '#selectImg'
              , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
              , acceptMime: 'image/*'
              , multiple: false
              , done: function (res) {
                  if (res.ResultCode == 0) {
                      addImg(res.Data);
                      layer.msg('上传成功');
                  } else {
                      layer.msg(res.ResultInfo);
                  }
              }
            });
            var pics = d.Path;
            if (pics != "" && pics != null && pics != 'null') {
                addImg({ name: pics, path: layui.setter.ImgPath + pics });
            }
        })
    }
    function addImg(src) {
        var html = "    <div style=\"line-height:100px;float:left\"> " +
                           " <a style=\"float:right;line-height:10px;background-color:#ff0000;font-size:24px;color:white;border-top:3px solid #ff0000\" onclick=\"deletp3()\">×</a> " +
                           " <img src=\"" + src.path + "\"   alt=\"\" class=\"layui-upload-img\">" +
                       "</div>";
        $('#divImgs').html(html);
        $("#Path").val(src.name);
    }
    //删除图片
    function deletp3() {
        $('#divImgs').html("");
        $("#Path").val("");
    }




    var ImgNum = 0;
    var Images = [];
    layui.data.setUploads2 = function (d) {
        layui.use(['jquery', 'upload', 'admin'], function () {
            window.jQuery = window.$ = layui.jquery;
            upload = layui.upload,
            admin = layui.admin;
            //多图上传
            var uploadInst = upload.render({
                elem: '#selectImg2'
              , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
              , acceptMime: 'image/*'
              , multiple: true
              , number: 9
              , done: function (res) {
                  if (res.ResultCode == 0) {
                      if (Images.length >= 9) {
                          return layer.msg("最多上传五张图片");
                      }
                      addImg2(res.Data);
                      layer.msg('上传成功');
                  } else {
                      layer.msg(res.ResultInfo);
                  }
              }
            });

            var pics = d.Qualifications;

            if (pics != "" && pics != null && pics != 'null') {
                var strs = JSON.parse(pics);
                for (var i = 0; i < strs.length; i++) {
                    var str = strs[i];
                    if (str != "") {
                        addImg2({ name: str, path: layui.setter.ImgPath + str });
                    }
                }
            }
        })
    }
    function addImg2(src) {
        var div = "divimg" + ImgNum;
        var img = "Img" + ImgNum;
        var html = "    <div style=\"line-height:100px;float:left\" id='" + div + "'> " +
                           " <a style=\"float:right;line-height:10px;background-color:#ff0000;font-size:24px;color:white;border-top:3px solid #ff0000\" onclick=\"deletp(" + ImgNum + ")\">×</a> " +
                           " <img id='" + img + "' src=\"" + src.path + "\" alt=\"\" class=\"layui-upload-img\">" +
                       "</div>";
        $('#divImgs2').append(html);
        Images.push(src.name);
        $("#Qualifications").val(JSON.stringify(Images));
        ImgNum++;
    }
    //删除图片
    function deletp(num) {
        var div = "divimg" + num;
        for (var i = 0; i < Images.length; i++) {
            if (layui.setter.ImgPath + Images[i] == $("#Img" + num + "").attr("src")) {
                Images.splice(i, 1);
            }
        }
        var divImg = document.getElementById(div);
        divImg.parentNode.removeChild(divImg);

        $("#Qualifications").val(JSON.stringify(Images));
    }



    
    layui.data.datedone = function (d) { 
        layui.use(['laydate'], function () {
                var laydate = layui.laydate;
     
        });
    }   
</script>
